<template>
  <view class="new_main">
    <scroll-view
      style="height: 100vh; background-color: #fff"
      class="scroll_content"
      scroll-y="true"
      :refresher-triggered="isRefreshing"
      refresher-background="#F6F7FB"
      @scrolltolower="loadMore"
    >
      <view class="topView">
        <!-- 顶部背景图 -->
        <u-icon
          class="arrow_left"
          name="arrow-left"
          size="24"
          color="#fff"
          @click="goBack()"
        ></u-icon>
        <image
          class="topImage"
          src="/static/img/my/homeCenter/myHome_bj.png"
          mode="widthFix"
        />
      </view>
      <view class="top_content">
        <view class="userInfo">
          <navigator url="../homePage/edit">
            <view class="avatar">
              <image
                :src="info.avatar"
                class="img100"
                mode="aspectFill"
              ></image>
            </view>
          </navigator>
          <navigator url="../homePage/edit">
            <view class="edit"> 编辑 </view>
          </navigator>
        </view>
        <view class="online_status">
          <text class="name"> {{ info.nickname }}</text>
          <view class="user_status">
            <view
              class="online_flag"
              v-if="majorStatus == 1"
              @click="statusShow = true"
            >
              <view class="flag_dot1"></view>
              <view class="flag_text"> 在线 </view>
            </view>
            <view class="online_flag" v-if="majorStatus == 2">
              <view class="flag_dot2"></view>
              <view class="flag_text"> 忙碌 </view>
            </view>
            <view
              class="online_flag"
              v-if="majorStatus == 0"
              @click="statusShow = true"
            >
              <view class="flag_dot3"></view>
              <view class="flag_text"> 离线 </view>
            </view>
            <u-icon
              name="arrow-down-fill"
              size="12"
              v-if="majorStatus != 2"
            ></u-icon>
          </view>
        </view>
        <!-- 官方认证 -->
        <view class="approve">
          <view class="approveImg">
            <image
              :src="
                info.is_major == 0
                  ? '/static/img/my/homeCenter/V_0.png'
                  : '/static/img/my/homeCenter/V_1.png'
              "
              mode="widthFix"
              class="img100"
            ></image>
          </view>
          <view class="approveText">
            {{ majorTypes.replace(/,/g, "、") }}
          </view>
        </view>
        <!-- 擅长 -->
        <view class="good_tags" v-if="majorDirectionList.length > 0">
          <view
            class="good_item"
            v-for="(item, index) in majorDirectionList"
            :key="index"
          >
            {{ item }}
          </view>
        </view>
      </view>
      <!-- 个人简介 -->
      <view class="introduce">
        <view class="text" v-html="info.bio"></view>
      </view>

      <!-- 赞,粉丝,关注 -->
      <view class="like_info flex">
        <view class="like_item">
          <text class="item_txt">{{ info.likes }}</text
          >赞
        </view>

        <navigator
          class="like_item"
          url="/pages/my/homeCenter/fans"
          hover-class="none"
        >
          <text class="item_txt">{{ info.fans }}</text
          >粉丝
        </navigator>

        <navigator
          class="like_item"
          url="/pages/my/homeCenter/followList"
          hover-class="none"
        >
          <text class="item_txt">{{ info.focus }}</text
          >关注
        </navigator>
      </view>
      <view class="askContent">
        <view class="ask_nav">
          <view
            class="nav_item"
            v-for="(item, index) in navList"
            :key="index"
            @click="navClick(index)"
          >
            <text class="nav_txt">{{ item.name }}</text
            ><text class="nav_txt" v-if="index == 1 && judgeList.length > 0"
              >({{ allCount }})</text
            >
            <view class="tableLine" v-show="currentPage == index"></view>
          </view>
        </view>
        <view class="answer_content" v-show="currentPage == 0">
          <template v-if="answerList.length > 0">
            <view
              class="answerList"
              v-for="(item, index) in answerList"
              :key="index"
              @click="goInfo(item)"
            >
              <view class="t_info">
                <image
                  class="t_avatar"
                  :src="item.avatar"
                  mode="aspectFill"
                ></image>
                <view>
                  <view class="t_name">{{ item.name }}</view>
                  <view class="t_time">{{ item.time }}</view>
                </view>
              </view>
              <view class="as_content">
                {{ item.content }}
              </view>
              <view class="reply_content">
                <view class="tips"> 我的回答 </view>
                <view class="reply_details" v-if="item.answer">
                  <view v-if="item.answer.extendedData.type == 1">
                    {{ item.answer.message }}
                  </view>
                  <view v-if="item.answer.extendedData.type == 11">
                    [ 图片 ]
                  </view>
                  <view v-if="item.answer.extendedData.type == 111">
                    [ 表情 ]
                  </view>
                </view>
              </view>
            </view>
            <uni-load-more :status="listStatus"></uni-load-more>
          </template>
          <template v-else>
            <view>
              <u-empty
                text="暂无回答"
                icon="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"
              ></u-empty>
            </view>
          </template>
        </view>
        <view class="evaluate_content" v-show="currentPage == 1">
          <template v-if="judgeList.length > 0">
            <view
              class="evaluate_item"
              v-for="(item, index) in judgeList"
              :key="index"
            >
              <image
                class="left_avatar"
                :src="item.user_avatar"
                mode="aspectFill"
              ></image>
              <view class="right_info">
                <view class="top_title">
                  <view class="top_name">
                    {{ item.nickname }}
                  </view>
                  <u-rate :readonly="true" :value="item.star"></u-rate>
                </view>
                <view class="content">
                  {{ item.evaluate }}
                </view>
                <view class="date">
                  {{ item.createtime_text }}
                </view>
              </view>
            </view>
            <uni-load-more :status="listStatus"></uni-load-more>
          </template>
          <template v-else>
            <u-empty
              text="暂无评论"
              icon="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"
            ></u-empty>
          </template>
        </view>
      </view>
    </scroll-view>

    <u-action-sheet
      :actions="statusList"
      :show="statusShow"
      :closeOnClickOverlay="true"
      :closeOnClickAction="true"
      @close="close()"
      @select="selectClick"
    ></u-action-sheet>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../pages/my/homeCenter/teacherHome"
></script>
<style lang="scss" scoped>
.img100 {
  width: 100%;
  height: 100%;
}

page {
  background-color: #f6f6f6 !important;
}

.topImage {
  width: 100%;
  height: 100%;
}

.arrow_left {
  position: absolute;
  top: var(--status-bar-height);
  left: 32rpx;
  z-index: 999999;
}

.evaluate_content {
  min-height: 600rpx;
}

.answer_content {
  min-height: 600rpx;
}

.top_content {
  position: absolute;
  top: 300rpx;
  border-radius: 25rpx 25rpx 0 0;
  padding: 0 30rpx;
  width: 100%;
  background-color: #fff;

  .userInfo {
    position: relative;
    display: flex;
    justify-content: space-between;
    .avatar {
      border: 10rpx solid #fff;
      border-radius: 100rpx;
      height: 200rpx;
      width: 200rpx;
      overflow: hidden;
      position: absolute;
      bottom: 4rpx;
    }
    .edit {
      text-align: center;
      width: 148rpx;
      height: 62rpx;
      line-height: 62rpx;
      background: #fb840e;
      border-radius: 82rpx;
      color: #fff;
      font-size: 28rpx;
      margin-top: 30rpx;
    }
  }

  .online_status {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
    .name {
      font-weight: 700;
      font-size: 50rpx;
      color: #333333;
      margin-right: 20rpx;
    }

    .user_status {
      display: flex;
      height: 100rpx;

      .online_flag {
        display: flex;
        align-items: center;
      }

      .flag_dot1 {
        width: 12rpx;
        height: 12rpx;
        background-color: #36ce50;
        border-radius: 50%;
        margin-right: 10rpx;
      }

      .flag_dot2 {
        width: 12rpx;
        height: 12rpx;
        background-color: #ff6161;
        border-radius: 50%;
        margin-right: 10rpx;
      }

      .flag_dot3 {
        width: 12rpx;
        height: 12rpx;
        background-color: #999999;
        border-radius: 50%;
        margin-right: 10rpx;
      }
    }
  }
}

.approve {
  display: flex;
  align-items: center;
  margin-top: 30rpx;
  .approveImg {
    vertical-align: middle;
    width: 32rpx;
    height: 32rpx;
    margin-right: 10rpx;
  }

  .approveText {
    font-size: 28rpx;
    color: #333333;
    font-weight: bold;
  }
}

.good_tags {
  display: flex;
  margin-top: 20rpx;
  .good_item {
    padding: 0 10rpx;
    margin-right: 10rpx;
    min-width: 150rpx;
    height: 60rpx;
    background: #f6f6f6;
    border-radius: 4rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.introduce {
  .text {
    font-size: 25rpx;
    color: #999999;
  }
}

.like_info {
  display: flex;
  padding: 0 40rpx;
  width: 100%;
  height: 80rpx;
  background-color: #ffffff;

  .like_item {
    font-size: 26rpx;
    color: #999999;
    margin-right: 100rpx;
    .item_txt {
      font-size: 40rpx;
      margin-right: 10rpx;
      color: #6d91ff;
    }
  }
}

.askContent {
  padding: 30rpx;
  margin-top: 20rpx;
  background-color: #fff;

  .ask_nav {
    display: flex;
    height: 87rpx;
    border-bottom: 1rpx solid #eaeaea;

    .nav_item {
      font-size: 36rpx;
      color: #333333;
      font-weight: bold;
      margin-right: 100rpx;
      .nav_txt {
        color: rgb(102, 102, 102);
      }
    }

    .tableLine {
      position: relative;
      left: 50%;
      top: 30rpx;
      transform: translate(-50%, 0);
      width: 66rpx;
      height: 6rpx;
      background: #4291ff;
      border-radius: 516rpx;
    }
  }
}

.answer_content {
  .answerList {
    margin-top: 60rpx;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #d8d8d8;
    .t_info {
      display: flex;
      .t_avatar {
        margin-right: 10rpx;
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }

      .t_name {
        font-size: 28rpx;
      }

      .t_time {
        font-size: 24rpx;
        color: #999999;
        margin-top: 10rpx;
      }
    }
  }

  .answerList:last-child {
    border-bottom: none;
  }
}

.text {
  margin-top: 340rpx;
  width: 100%;
  padding: 20rpx 40rpx;
  height: auto;
  font-size: 25rpx;
  color: #999999;
  background-color: #fff;
}

.evaluate_item {
  display: flex;
  padding: 40rpx 0;
  width: 100%;
  min-height: 268rpx;

  .left_avatar {
    width: 104rpx;
    height: 104rpx;
    margin-right: 20rpx;
    border-radius: 50%;
  }

  .right_info {
    border-bottom: 1rpx solid #eaeaea;

    .top_title {
      display: flex;
      justify-content: space-between;

      .top_name {
        font-size: 26rpx;
        color: #666666;
      }
    }

    .content {
      width: 544rpx;
      font-size: 32rpx;
      margin-top: 10rpx;
    }

    .date {
      margin-top: 14rpx;
      font-size: 24rpx;
      color: #b8b8b8;
    }
  }
}

.answer_content {
  .as_content {
    width: 100%;
    width: 100%;
    font-size: 30rpx;
    font-weight: bold;
    margin-top: 30rpx;
  }

  .reply_content {
    margin-top: 15rpx;
    padding: 24rpx 35rpx;
    width: 100%;
    background: #f8f8f8;
    border-radius: 10px;
    font-size: 26rpx;
    color: #999999;

    .tips {
      font-size: 22rpx;
      color: #6d91ff;
    }

    .reply_details {
      margin-top: 10rpx;
    }
  }
}

/deep/.u-action-sheet__item-wrap__item {
  padding: 25px;
}
</style>
